<template>
  <div class="user-information-page">
    <!-- 顶部标题 -->
    <div class="page-header">
      <h1 class="page-title">资讯中心</h1>
      <p class="page-subtitle">发现最新健康资讯，关注您的健康生活</p>
    </div>

    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-container">
        <el-input
            v-model="searchKeyword"
            placeholder="搜索资讯标题或内容..."
            class="search-input"
            size="large"
            @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button
            type="primary"
            size="large"
            @click="handleSearch"
            class="search-btn"
        >
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
      </div>
    </div>

    <!-- 栏目分类 -->
    <div class="category-section">
      <div class="category-tabs">
        <div
            class="category-tab"
            :class="{ active: activeCategory === 'all' }"
            @click="switchCategory('all')"
        >
          全部
        </div>
        <div
            v-for="category in categoryList"
            :key="category.categoryId"
            class="category-tab"
            :class="{ active: activeCategory === category.categoryId.toString() }"
            @click="switchCategory(category.categoryId.toString())"
        >
          {{ category.categoryName }}
        </div>
      </div>
    </div>

    <!-- 资讯列表 -->
    <div class="information-list">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-state">
        <div class="loading-skeleton" v-for="n in 6" :key="n">
          <el-skeleton :rows="1" animated />
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="informationList.length === 0" class="empty-state">
        <el-empty description="暂无相关资讯" :image-size="200">
          <el-button type="primary" @click="resetSearch">查看全部资讯</el-button>
        </el-empty>
      </div>

      <!-- 资讯卡片 -->
      <div v-else class="cards-grid">
        <div
            v-for="item in informationList"
            :key="item.articleId"
            class="information-card"
            @click="viewDetail(item)"
        >
          <div class="card-image">
            <el-image
                :src="item.coverImage || '/api/placeholder/300/200'"
                :alt="item.title"
                fit="cover"
                class="cover-image"
            >
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Picture /></el-icon>
                  <span>暂无图片</span>
                </div>
              </template>
            </el-image>
            <!-- 热门标签 -->
            <div v-if="item.isHot === '1'" class="hot-badge">
              <el-icon><Star /></el-icon>
              热门
            </div>
          </div>

          <div class="card-content">
            <h3 class="article-title">{{ item.title }}</h3>
            <p class="article-summary">{{ getContentSummary(item.content) }}</p>

            <div class="article-meta">
              <div class="meta-left">
                <span class="author">
                  <el-icon><User /></el-icon>
                  {{ item.author || '未知作者' }}
                </span>
                <span class="publish-time">
                  <el-icon><Clock /></el-icon>
                  {{ formatTime(item.publishTime) }}
                </span>
              </div>
            </div>

            <div class="article-stats">
              <div class="stat-item">
                <el-icon><ChatDotRound /></el-icon>
                <span>{{ item.commentNum || 0 }}</span>
              </div>
              <div class="stat-item">
                <el-icon><Star /></el-icon>
                <span>{{ item.likeNum || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-section" v-if="total > queryParams.pageSize">
      <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Search,
  User,
  Clock,
  ChatDotRound,
  Star,
  Picture
} from '@element-plus/icons-vue'
import { listInformation } from "@/api/information/information"
import { listCategory } from "@/api/information/information.js"

const router = useRouter()

// 响应式数据
const searchKeyword = ref('')
const activeCategory = ref('all')
const categoryList = ref([])
const informationList = ref([])
const loading = ref(false)
const total = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 12,
  categoryId: null,
  searchKeyword: ''
})

// 搜索处理
const handleSearch = () => {
  queryParams.searchKeyword = searchKeyword.value
  queryParams.pageNum = 1
  getList()
}

// 重置搜索
const resetSearch = () => {
  searchKeyword.value = ''
  activeCategory.value = 'all'
  queryParams.searchKeyword = ''
  queryParams.categoryId = null
  queryParams.pageNum = 1
  getList()
}

// 切换栏目
const switchCategory = (categoryId) => {
  activeCategory.value = categoryId
  if (categoryId === 'all') {
    queryParams.categoryId = null
  } else {
    queryParams.categoryId = parseInt(categoryId)
  }
  queryParams.pageNum = 1
  getList()
}

// 获取内容摘要
const getContentSummary = (content) => {
  if (!content) return '暂无内容简介'
  // 移除HTML标签
  const text = content.replace(/<[^>]*>/g, '')
  return text.length > 100 ? text.substring(0, 100) + '...' : text
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  try {
    const date = new Date(time)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  } catch {
    return ''
  }
}

// 查看详情
const viewDetail = (item) => {
  router.push(`/userIndex/information/detail/${item.articleId}`)
}

// 获取栏目列表
const getCategoryList = async () => {
  try {
    const response = await listCategory()
    categoryList.value = response.data || []
  } catch (error) {
    console.error('获取栏目列表失败:', error)
    categoryList.value = []
  }
}

// 获取资讯列表
const getList = () => {
  loading.value = true
  listInformation(queryParams).then(response => {
    informationList.value = response.rows || []
    total.value = response.total || 0
    loading.value = false
  }).catch(error => {
    console.error('获取资讯列表失败:', error)
    informationList.value = []
    loading.value = false
  })
}

// 分页处理
const handleSizeChange = (newSize) => {
  queryParams.pageSize = newSize
  queryParams.pageNum = 1
  getList()
}

const handleCurrentChange = (newPage) => {
  queryParams.pageNum = newPage
  getList()
}

// 初始化
onMounted(() => {
  getCategoryList()
  getList()
})
</script>

<style scoped>
.user-information-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 0;
}

.search-section {
  margin-bottom: 30px;
}

.search-container {
  display: flex;
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
}

.search-btn {
  padding: 0 24px;
}

.category-section {
  margin-bottom: 30px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.category-tab {
  padding: 12px 24px;
  background: white;
  border: 2px solid #e8e8e8;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #666;
}

.category-tab:hover {
  border-color: #409eff;
  color: #409eff;
  transform: translateY(-2px);
}

.category-tab.active {
  background: #409eff;
  border-color: #409eff;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.information-list {
  min-height: 400px;
}

.loading-state {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.loading-skeleton {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.empty-state {
  background: white;
  border-radius: 16px;
  padding: 60px 20px;
  text-align: center;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.information-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.information-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.information-card:hover .cover-image {
  transform: scale(1.05);
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  color: #c0c4cc;
}

.image-placeholder .el-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.hot-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

.card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-title {
  font-size: 1.2rem;
  color: #2c3e50;
  margin: 0 0 12px 0;
  line-height: 1.4;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-summary {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-meta {
  margin-bottom: 16px;
}

.meta-left {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: #7f8c8d;
}

.meta-left span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.article-stats {
  display: flex;
  gap: 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.pagination-section {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-information-page {
    padding: 12px;
  }

  .page-header {
    padding: 30px 15px;
    margin-bottom: 24px;
  }

  .page-title {
    font-size: 2rem;
  }

  .search-container {
    flex-direction: column;
  }

  .category-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .category-tab {
    white-space: nowrap;
    padding: 10px 20px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-image {
    height: 160px;
  }
}
</style>